<template>
    <div class="addPersonal">
        <el-card shadow="hover" class="layout-padding-auto">
            <div style="display: flex;">
                <div class="back" @click="goBack"> ←返回 </div>
                <h1>{{ deviceName }}设备类型关联备件 <span>(共{{ total }}件)</span></h1>
            </div>
            <el-divider />
            <TableSearch :search="state.search" @search="onSearch" />
            <Table ref="tableRef" v-bind="state.tableData" class="table-demo" @pageChange="onTablePageChange"
                @listenClick="listenClick" @dataList="dataList">
                <template #default="{ slotData, slotColumn }">
                    <div v-if="slotColumn.key === 'careerType'">
                        {{ slotData.careerType == 1 ? '维修' : '维保' }}
                    </div>
                </template>
            </Table>
        </el-card>
    </div>
</template>
<script setup lang='ts'>
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, defineAsyncComponent, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import { removeRelevanceApi } from '/@/api/assets';
import { dictionaryList } from '/@/api/publicApi';
import routes from '/@/router'
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const route = useRoute()
const id = ref(route.query.id)
const deviceName = ref(route.query.name)
const goBack = () => {
    routes.push({
        name: 'assetsSpareParts',
    })
}
onMounted(() => {
    state.tableData.param.deviceType = id.value
})

// 定义变量内容
const tableRef = ref<RefType>();
const state = reactive<TableDemoState>({
    tableData: {
        flash: false, // 刷新表格
        // 表头内容（必传，注意格式）
        header: [
            { key: 'partNum', colWidth: '', title: '备件编号', type: 'text' },
            { key: 'partName', colWidth: '', title: '备件名称', type: 'text' },
            { key: 'partTypeName', colWidth: '', title: '备件类型', type: 'text' },
            { key: 'createTime', colWidth: '', title: '关联时间', type: 'text' },
        ],
        columnBtn: [
            {
                name: 'delRelevance',
                text: '删除关联',
                // hide(row: any): boolean {
                //   return row.status == 0
                // },
                type: 'danger'
            },
        ],
        // 配置项（必传）
        config: {
            listApi: '/device/mobile/devicePartRelevance/partRelevanceList',
            listHttp: 'post',
            total: 0, // 列表总数
            loading: true, // loading 加载
            noPage: false, // 是否分页
            isSerialNo: false, // 是否显示表格序号
            isSelection: false, // 是否显示表格多选
            isOperate: true, // 是否显示表格操作栏
            isExtend: false, // 是否可以扩展
            operateWidth: '150',//操作栏宽度
            fixed: 'right', //操作栏固定
        },
        // 搜索参数
        param: {
            deviceType: '', // 必传参数，分页的不要传
        },
    },
    // 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
    search: {
        param: [
            { label: '', prop: 'keyword', placeholder: '可输入备件名称/编号搜索', type: 'input' },
            { label: '备件类型', prop: 'partType', placeholder: '备件类型', options: [], type: 'select' },
        ],
        reset: true
    },
})

// 初始化列表数据
const getTableData = () => {
    state.tableData.flash = !state.tableData.flash;
};
// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
    state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
    // console.log(state.tableData.param);
    state.tableData.flash = !state.tableData.flash;
};
// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
    state.tableData.param.pageNum = page.pageNum;
    state.tableData.param.pageSize = page.pageSize;
    getTableData();
};

const total = ref(0)
const dataList = (list: any) => {
    if (total.value == 0) {
        total.value = list.total
    }
}

const getPartType = () => {
    dictionaryList({ configType: 'part_type', keyword: '' }).then(res => {
        if (res.code == 0) {
            state.search.param.forEach((i: any) => {
                if (i.prop == 'partType') {
                    i.options = res.data
                    i.options.unshift({
                        configValue: "全部",
                        customizeFlag: 0,
                        id: "",
                        parentId: "0"
                    })
                }
            });
        }
    })
}
getPartType()

const delRelevance = (row: any) => {
    ElMessageBox.confirm(
        '确定删除此备件与设备的关联吗',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            removeRelevanceApi(row.id).then(res => {
                if (res.code == 0) {
                    ElMessage({
                        type: 'success',
                        message: '已删除',
                    })
                    getTableData()
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

//定义方法对象 注意定义的方法 必须在上面已经申明 所以建议objFun申明和 listenClick方法 写在页面最下面
const objFun = {
    'delRelevance': delRelevance
}
// 监听子级表格  传过来的方法
const listenClick = (name: string, val: any) => {
    objFun[name](val)
}
</script>
<style scoped lang='scss'>
.back {
    cursor: pointer;
    color: rgba(140, 140, 140, 1);
    margin: auto 0;
}

h1 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 10px;
}
.el-divider--horizontal{
    margin: 15px 0;
}
</style>
<style>
.el-button--warning.is-plain {
    --el-button-bg-color: #fdf6ec;
    --el-button-hover-text-color: #e6a23c;
    --el-button-hover-bg-color: #fdf6ec;
}
.el-button--warning.is-plain:hover {
    --el-button-hover-text-color: #fff;
    --el-button-hover-bg-color: #e6a23c;
}
.el-button--danger.is-plain {
    --el-button-bg-color: #fef0f0;
    --el-button-hover-text-color: #f56c6c;
    --el-button-hover-bg-color: #fef0f0;
}
.el-button--danger.is-plain:hover {
    --el-button-hover-text-color: #fff;
    --el-button-hover-bg-color: #f56c6c;
}
</style>